<template>
	<view class="page">
		<view class="content">
			<view class="top">
				<img class="avart" src="@/static/avart.jpg" alt="" />
				<view style="color:#fff;">{{name}}</view>
			</view>
			<view class="bottom">
				<view class="list">
					<view v-for="(item,index) in list" :key="index" class="item" @click="logOut(item.address)">
						<view style="display: flex;flex-direction: row;align-item:center;gap:10px;">
							<uni-icons :type="item.icon" size="25" :color="item.color"></uni-icons>
							<view>{{item.name}}</view>
						</view>
						<uni-icons type="right" size="25" color="#f1f1f1"></uni-icons>
					</view> 
				</view>
			</view>
		</view>	
		<view class="footer">
			<view class="homePage" @click="changePage('index')">
				<img src="static/images/tabbar/home.png" alt="" />
				首页
			</view>
			<view class="minePage" style="color:#649adf">
				<img src="static/images/tabbar/mine_.png" alt="" />
				我的
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				name: '',
				list: [
					{
						name: '退出登录',
						icon: 'tune',
						color: '#d36b72',
					},
				]
			}
		},
		onLoad() {
			// 从本地存储获取字符串
			const userString = uni.getStorageSync('info');
			
			// 将字符串解析为对象
			const user = userString ? JSON.parse(userString) : null;
			this.name = user.username

		},
		methods: {
			logOut() {
				// 清除本地存储中的用户信息和权限
				uni.removeStorageSync('App-Token');
				uni.removeStorageSync('userPermissions');
				
				// 跳转到登录页面
				uni.redirectTo({
				  url: '/pages/index/login' // 替换为你的登录页面路径
				});		
			},
			changePage(address) {
				uni.navigateTo({
					url: `/pages/${address}/index`
				});			
			}
		}
	}
</script>
<style>
	.page {
		width: 100vw;
		height: 100vh;
	}
	.content {
		height: 90vh;
		background-image: url('@/static/bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		display: flex;
		flex-direction: column;
	}

	.top {
		height: 30vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.avart {
		width: 10vh;
		height: 10vh;
		border: 3px solid #6fbdf7;
		border-radius: 50%;
		margin-bottom: 1vh;
	}

	.bottom {
		height: 60vh;
		width: 100%;
		background-color: #f8f8f8;
		border-top-right-radius: 25px;
		border-top-left-radius: 25px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25px 0;
	}

	.list {
		width: 90%;
	}

	.item {
		/* background-color: #55aa7f; */
		margin-bottom: 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>
